<!-- 首页九宫格 -->
<template>
  <!-- 九宫格菜单列表 -->
  <div class="sudoku_row" :style="{ height:scroll+'px' }">
    <div
      class="sudoku_item "
      :class="curSelect == sudoku.id ? 'opacity' : ''"
      @click="tabbarChange(sudoku)"
      v-for="(sudoku, index) in sudokus"
      :key="index"
      @touchstart="touchstart(index)"
      @touchend="touchend"
    >
      <img :src="sudoku.img_src" width="40" height="40" />
      {{ sudoku.name }}
    </div>
  </div>
</template>

<script>
import { Icon, Grid, GridItem } from "vant";

export default {
  components: {
    "van-icon": Icon,
    "van-grid": Grid,
    "van-grid-item": GridItem
  },
  data() {
    return {
      sudokus: [
        {
          id: 0,
          name: "客户",
          url: "/formal",
          img_src: require("../../assets/kehu.png")
        },
        {
          id: 1,
          name: "联系人",
          url: "/record",
          img_src: require("../../assets/lianxiren.png")
        },
        {
          id: 2,
          name: "沟通",
          url: "/Communication",
          img_src: require("../../assets/goutong.png")
        },
        {
          id: 3,
          name: "工单",
          url: "/myWorkOrder",
          img_src: require("../../assets/gongdan.png")
        },
        {
          id: 4,
          name: "样品",
          url: "/service",
          img_src: require("../../assets/yangpin.png")
        },
        {
          id: 5,
          name: "交易",
          url: "/transaction",
          img_src: require("../../assets/jiaoyi.png")
        },
        {
          id: 6,
          name: "报表",
          url: "/excel",
          img_src: require("../../assets/baobiao.png")
        },
        {
          id: 7,
          name: "我的",
          url: "/user",
          img_src: require("../../assets/wode.png")
        }
      ],
      curSelect: null,
      bodyHeight : 0
    };
  },
  created (){
      // 2.通过dispatch触发一个actions  储存vuex里的用户id
    this.$store.dispatch("getUserInfoId",{url:"/Base_Manage/Home/GetOperatorInfo"})
  },
  computed: {
    scroll() {
      return Number(document.documentElement.clientHeight) // 网页可见区域高 (包括边线的高)
    }
  },
  methods: {
    // 九宫格菜单点击事件
    tabbarChange(item) {
      this.$router.push({ path: item.url });
    },
    touchstart: function(e) {
      var that = this;
      var list = that.sudokus;
      for (var i = 0, len = list.length; i < len; ++i) {
        if (list[i].id == e) {
          that.curSelect = i;
        }
      }
    },
    touchend: function() {
      var that = this;
      that.curSelect = null;
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  border: 1px solid red;
}
.sudoku_row {
  display: flex;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  height: 100%;
  background: url("../../assets/homeback.jpg");
  background-size: cover;
  justify-content: center;
  //   待后续兼容
}
.sudoku_item {
  margin-right: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 40%;
  height: 15%;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: rgba(249, 240, 240, 0.15);
  border-radius: 5px;
  color:#E7FDFF;
  font-weight: bold;
}
.opacity {
  opacity: 0.4;
  background: #e5e5e5;
}
.sudoku_item img {
  margin-bottom: 3px;
  display: block;
}
</style>
